<!-- components/DatePickerField.vue -->
<template>
  <view class="form-card">
    <text class="form-label" :class="{required: required}">{{label}}</text>
    <picker mode="date" fields="day" :end="currentDate" :value="value" @change="handleDateChange">
      <view class="picker-item">
        <text>{{ displayValue || placeholder }}</text>
      </view>
    </picker>
    <view class="divider"></view>
  </view>
</template>

<script>
export default {
  name: 'DatePickerField',
  props: {
    label: {
      type: String,
      required: true
    },
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择日期'
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  data() {
      return {
        currentDate: this.getCurrentDate(),
        selectedDate: ''
      }
    },
  computed: {
    displayValue() {
      return this.modelValue;
    },
    value() {
      return this.modelValue;
    }
  },
  methods: {
	getCurrentDate() {
		const date = new Date()
		const year = date.getFullYear()
		const month = date.getMonth() + 1
		const day = date.getDate()
		console.log(`${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`)
		return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
	  },
    handleDateChange(e) {
      this.$emit('update:modelValue', e.detail.value);
      this.$emit('change', e.detail.value);
    }
  }
};
</script>

<style scoped>
/* 保持原有的样式不变 */
.form-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}

.form-label {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.form-label.required::before {
  content: '*';
  color: #f44336;
  margin-right: 8rpx;
}

.picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  color: #666;
  height: 80rpx;
  line-height: 80rpx;
}

.divider {
  height: 1rpx;
  background: #eee;
  margin: 20rpx -30rpx 0;
}
</style>